<template>
    <div class="block">
        <template v-if="value.length">
            <el-button class="right" size="small" @click="Log">变动日志</el-button>
            <el-button
                class="right"
                type="primary"
                size="small"
                @click="Save"
            >
                保存
            </el-button>
        </template>
        <slot><h2>{{ data.title }}</h2></slot>
        <div class="content">
            <div class="flex">
                <p v-for="item in list" :key="item.uid">
                    {{ Label(item.paramName) }}<ipt v-model="item.paramValue" />
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {
    },
    props: {
        value: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            list: []
        }
    },
    computed: {
        data () {
            const _self = this.value
            const _data = { }
            if (_self[0]) {
                _data.title = _self[0].paramTypeName
                _data.id = _self[0].paramType
            }
            return _data
        }
    },
    watch: {
        value: {
            immediate: true,
            handler (value) {
                this.list = value
            }
        }
    },
    created () {

    },
    mounted () {
        // this.value = this.value
    },
    methods: {
        Label (val) {
            return `${val}: ${/举报|不感兴趣/.test(val) ? '- ' : '+ '}`
        },
        Save () {
            const sendData = []
            const _self = this.value
            for (const key in _self) {
                const { uid, paramType, paramName, paramValue } = _self[key]
                sendData.push({ uid, paramType, paramName, paramValue })
            }
            // console.log('click', sendData, this.data.id)
            this.$emit('clic', 'save', sendData, this.data.id)
        },
        Log () {
            // console.log('click', this.data.id)
            this.$emit('clic', 'log', this.data.id)
        }
    }
}
</script>

<style scoped lang="stylus">
@import '../styl/public.styl'
</style>
